<template>
  <div class="activity-container">
    <!-- 顶部操作按钮 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="activity-title">
          <span class="title-text">活动中心</span>
          <span class="title-decoration"></span>
        </h1>
        <p class="page-description">发现精彩活动，丰富美好生活</p>
      </div>
      <el-button
          type="primary"
          @click="showMyActivities"
          :disabled="!user.username"
          class="my-activity-btn"
      >
        <el-icon><User /></el-icon>
        <span>我的活动</span>
      </el-button>
    </div>

    <!-- 分类筛选 -->
    <div class="category-filter">
      <el-scrollbar>
        <el-radio-group v-model="activeCategory" @change="handleCategoryChange" class="category-group">
          <el-radio-button :label="0" class="category-item">全部活动</el-radio-button>
          <el-radio-button
              v-for="category in categories"
              :key="category.categoryId"
              :label="category.categoryId"
              class="category-item"
          >
            {{ category.categoryName }}
          </el-radio-button>
        </el-radio-group>
      </el-scrollbar>
    </div>

    <!-- 活动列表 -->
    <div class="activity-list">
      <el-card
          v-for="activity in activities"
          :key="activity.activityId"
          class="activity-card"
          shadow="hover"
      >
        <div class="card-content">
          <div class="activity-cover">
            <el-image
                class="cover-image"
                :src="activity.coverUrl"
                fit="cover"
                :preview-src-list="[activity.coverUrl]"
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                  <span>图片加载失败</span>
                </div>
              </template>
            </el-image>
          </div>
          <div class="activity-info">
            <div class="activity-header">
              <h3 class="activity-name">{{ activity.title }}</h3>
              <el-tag :type="getStatusTagType(activity.status)" size="small" effect="light" round>
                {{ getStatusText(activity.status) }}
              </el-tag>
            </div>
            <div class="activity-meta">
              <div class="meta-item">
                <el-icon class="meta-icon"><Clock /></el-icon>
                <span>{{ formatDate(activity.startTime) }} ~ {{ formatDate(activity.endTime) }}</span>
              </div>
              <div class="meta-item">
                <el-icon class="meta-icon"><Location /></el-icon>
                <span>{{ activity.location }}</span>
              </div>
              <div class="meta-item">
                <el-icon class="meta-icon"><User /></el-icon>
                <span>{{ activity.currentParticipants }}/{{ activity.maxParticipants }}人</span>
              </div>
              <div class="meta-item" v-if="activity.pointsAward > 0">
                <el-icon class="meta-icon"><Coin /></el-icon>
                <span>奖励积分: {{ activity.pointsAward }}</span>
              </div>
            </div>
            <div class="activity-actions">
              <el-button
                  size="small"
                  @click="showActivityDetail(activity.activityId)"
                  class="detail-btn"
              >
                <el-icon><View /></el-icon>
                <span>详情</span>
              </el-button>
              <el-button
                  v-if="user.username && !isJoined(activity.activityId)"
                  size="small"
                  type="primary"
                  @click="handleJoinActivity(activity)"
                  :disabled="activity.status !== 1"
                  class="join-btn"
              >
                <el-icon><Plus /></el-icon>
                <span>报名</span>
              </el-button>
              <el-button
                  v-if="isJoined(activity.activityId)"
                  size="small"
                  type="success"
                  @click="handleCheckIn(activity.activityId)"
                  :disabled="activity.status !== 2"
                  class="action-btn"
              >
                <el-icon><Check /></el-icon>
                <span>签到</span>
              </el-button>
              <el-button
                  v-if="isJoined(activity.activityId)"
                  size="small"
                  type="warning"
                  @click="handleCheckOut(activity.activityId)"
                  :disabled="activity.status !== 3"
                  class="action-btn"
              >
                <el-icon><Minus /></el-icon>
                <span>签退</span>
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 空状态 -->
    <el-empty v-if="activities.length === 0" description="暂无活动数据" />

    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="activities.length > 0">
      <el-pagination
          v-model:current-page="query.pageNum"
          v-model:page-size="query.pageSize"
          :total="total"
          :page-sizes="[5, 10, 20, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>

    <!-- 我的活动对话框 -->
    <el-dialog
        v-model="myActivitiesDialogVisible"
        title="我报名的活动"
        width="70%"
        class="my-activities-dialog"
    >
      <el-table
          :data="filteredMyActivities"
          style="width: 100%"
          v-loading="loadingMyActivities"
          stripe
      >
        <el-table-column prop="title" label="活动名称" width="180" />
        <el-table-column prop="statusText" label="状态" width="100">
          <template #default="{row}">
            <el-tag :type="getStatusTagType(row.status)" effect="light" round>
              {{ row.statusText }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180">
          <template #default="{row}">
            {{ formatDate(row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180">
          <template #default="{row}">
            {{ formatDate(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="活动地点" width="150" />
        <el-table-column label="操作" width="220">
          <template #default="{row}">
            <el-button
                size="small"
                @click="showActivityDetail(row.activityId)"
                class="detail-btn"
            >
              <el-icon><View /></el-icon>
              <span>详情</span>
            </el-button>
            <el-button
                v-if="row.status === 2"
                size="small"
                type="success"
                @click="handleCheckIn(row.activityId)"
                class="action-btn"
            >
              <el-icon><Check /></el-icon>
              <span>签到</span>
            </el-button>
            <el-button
                v-if="row.status === 2"
                size="small"
                type="warning"
                @click="handleCheckOut(row.activityId)"
                class="action-btn"
            >
              <el-icon><Minus /></el-icon>
              <span>签退</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="myActivitiesDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 活动详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="活动详情" width="60%" class="activity-detail-dialog">
      <div class="activity-detail">
        <div class="detail-cover">
          <el-image class="detail-image" :src="currentActivity.coverUrl" fit="cover">
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
        </div>
        <div class="detail-content">
          <div class="detail-header">
            <h3>{{ currentActivity.title }}</h3>
            <el-tag :type="getStatusTagType(currentActivity.status)" size="small" effect="light" round>
              {{ getStatusText(currentActivity.status) }}
            </el-tag>
          </div>

          <div class="detail-meta">
            <div class="meta-item">
              <el-icon class="meta-icon"><Clock /></el-icon>
              <span>活动时间: {{ formatDate(currentActivity.startTime) }} ~ {{ formatDate(currentActivity.endTime) }}</span>
            </div>
            <div class="meta-item">
              <el-icon class="meta-icon"><Clock /></el-icon>
              <span>报名截止: {{ formatDate(currentActivity.signupEndTime) }}</span>
            </div>
            <div class="meta-item">
              <el-icon class="meta-icon"><Location /></el-icon>
              <span>活动地点: {{ currentActivity.location }}</span>
            </div>
            <div class="meta-item">
              <el-icon class="meta-icon"><User /></el-icon>
              <span>参与人数: {{ currentActivity.currentParticipants }}/{{ currentActivity.maxParticipants }}人</span>
            </div>
            <div class="meta-item" v-if="currentActivity.pointsAward > 0">
              <el-icon class="meta-icon"><Coin /></el-icon>
              <span>奖励积分: {{ currentActivity.pointsAward }}</span>
            </div>
          </div>

          <div class="detail-description">
            <h4 class="description-title"><el-icon><Document /></el-icon> 活动详情</h4>
            <div class="description-content" v-html="currentActivity.content"></div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
              v-if="user.username && !isJoined(currentActivity.activityId)"
              type="primary"
              @click="handleJoinActivity(currentActivity)"
              :disabled="currentActivity.status !== 1"
              class="join-btn"
          >
            <el-icon><Plus /></el-icon>
            <span>报名</span>
          </el-button>
          <el-button
              v-if="isJoined(currentActivity.activityId)"
              type="success"
              @click="handleCheckIn(currentActivity.activityId)"
              :disabled="currentActivity.status !== 2"
              class="action-btn"
          >
            <el-icon><Check /></el-icon>
            <span>签到</span>
          </el-button>
          <el-button
              v-if="isJoined(currentActivity.activityId)"
              type="warning"
              @click="handleCheckOut(currentActivity.activityId)"
              :disabled="currentActivity.status !== 3"
              class="action-btn"
          >
            <el-icon><Minus /></el-icon>
            <span>签退</span>
          </el-button>
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Clock, Location, User, Coin, Picture, View, Plus, Check, Minus, Document } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from "axios";

// const userStr = localStorage.getItem('user');
// const userData = JSON.parse(userStr);

// 用户状态管理
const user = ref({
  username: userData?.user?.username || null,
  userId: userData?.user?.userId || null,
  userType: userData?.user?.userType || null,
  token: localStorage.getItem('token') || null
})

// 查询参数
const query = ref({
  pageNum: 1,
  pageSize: 10,
  categoryId: null,
  title: null,
  content: null,
  activityType: null,
  location: null,
  pointsAward: null,
  status: null
})

const activeCategory = ref(0)
const categories = ref([])
const activities = ref([])
const total = ref(0)
const myActivities = ref([])
const detailDialogVisible = ref(false)
const myActivitiesDialogVisible = ref(false)
const loadingMyActivities = ref(false)
const currentActivity = ref({
  activityId: null,
  title: '',
  content: '',
  coverUrl: '',
  startTime: '',
  endTime: '',
  signupEndTime: '',
  location: '',
  pointsAward: 0,
  maxParticipants: 0,
  currentParticipants: 0,
  status: 0
})

// 计算属性：处理我的活动数据
const filteredMyActivities = computed(() => {
  return myActivities.value.map(activity => ({
    ...activity,
    statusText: getStatusText(activity.status)
  }))
})

// 日期格式化函数
const formatDate = (dateString) => {
  if (!dateString) return ''

  const date = new Date(dateString)
  if (isNaN(date.getTime())) return dateString

  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')

  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 获取活动分类
const fetchCategories = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/activities/category/list`, {
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      },
    })
    categories.value = response.data.data?.list || []
  } catch (error) {
    ElMessage.error('获取分类失败')
    console.error('获取分类失败:', error)
  }
}

// 获取活动列表
const fetchActivities = async () => {
  try {
    const params = {
      pageNum: query.value.pageNum,
      pageSize: query.value.pageSize,
      categoryId: query.value.categoryId,
      title: query.value.title,
      content: query.value.content,
      activityType: query.value.activityType,
      location: query.value.location,
      pointsAward: query.value.pointsAward,
      status: query.value.status
    }

    // 移除空参数
    Object.keys(params).forEach(key => {
      if (params[key] === null || params[key] === '') {
        delete params[key]
      }
    })

    const response = await axios.get(`${BASE_URL}/api/v1/activities/list`, {
      params: params,
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      }
    })

    if (response.data && response.data.data) {
      activities.value = response.data.data.list || []
      total.value = response.data.data.total || 0
    } else {
      ElMessage.error('获取活动列表失败: 数据格式不正确')
    }
  } catch (error) {
    console.error('获取活动列表失败:', error)
    if (error.response) {
      if (error.response.status === 401) {
        ElMessage.error('请先登录')
      } else {
        ElMessage.error(`获取活动列表失败: ${error.response.data.message || '服务器错误'}`)
      }
    } else {
      ElMessage.error('网络错误，请检查连接')
    }
  }
}

// 获取我的活动
const fetchMyActivities = async () => {
  if (!user.value.username) {
    myActivities.value = []
    return
  }

  loadingMyActivities.value = true
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/activities/myActivities`, {
      params: {
        username: user.value.username
      },
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      }
    })
    myActivities.value = response.data.data || []
  } catch (error) {
    console.error('获取我的活动失败:', error)
    ElMessage.error('获取我的活动失败')
  } finally {
    loadingMyActivities.value = false
  }
}

// 显示我的活动
const showMyActivities = async () => {
  if (!user.value.username) {
    ElMessage.warning('请先登录')
    return
  }

  try {
    await fetchMyActivities()
    myActivitiesDialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取我的活动失败')
  }
}

// 分页大小变化处理
const handleSizeChange = (newSize) => {
  query.value.pageSize = newSize
  query.value.pageNum = 1
  fetchActivities()
}

// 页码变化处理
const handlePageChange = (newPage) => {
  query.value.pageNum = newPage
  fetchActivities()
}

// 分类改变
const handleCategoryChange = (categoryId) => {
  query.value.categoryId = categoryId === 0 ? null : categoryId
  query.value.pageNum = 1
  fetchActivities()
}

// 显示活动详情
const showActivityDetail = async (activityId) => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/activities/detail`, {
      params: {
        activityId: activityId
      },
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      }
    })

    currentActivity.value = response.data.data || {}
    detailDialogVisible.value = true
  } catch (error) {
    console.error('获取活动详情失败:', error)
    ElMessage.error('获取活动详情失败')
  }
}

// 检查是否已报名
const isJoined = (activityId) => {
  return Array.isArray(myActivities.value) &&
      myActivities.value.some(item => item.activityId === activityId)
}

// 报名活动
const handleJoinActivity = async (activity) => {
  if (!user.value.username) {
    ElMessage.warning('请先登录')
    return
  }

  try {
    await ElMessageBox.confirm(
        `确定要报名参加【${activity.title}】活动吗？`,
        '报名确认',
        {confirmButtonText: '确定', cancelButtonText: '取消'}
    )

    const response = await axios.post(`${BASE_URL}/api/v1/activities/join`, {
      activityId: activity.activityId,
      userId: user.value.userId,
      userType: user.value.userType,
      username: user.value.username,
    }, {
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      }
    })

    if (response.data.code === 2000) {
      ElMessage.success('报名成功')
      await fetchMyActivities()
      fetchActivities()

      if (detailDialogVisible.value) {
        currentActivity.value.currentParticipants += 1
      }
    } else {
      ElMessage.error(response.data.message || '报名失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('报名失败:', error)
      if (error.response) {
        ElMessage.error(error.response.data.message || '报名失败')
      } else {
        ElMessage.error('网络错误，请检查连接')
      }
    }
  }
}

// 签到
const handleCheckIn = async (activityId) => {
  try {
    await ElMessageBox.confirm('确定要签到吗？', '签到确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })

    const response = await axios.post(`${BASE_URL}/api/v1/activities/checkin`, {
      activityId: activityId,
      username: user.value.username
    }, {
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      }
    })

    if (response.data.code === 2000) {
      ElMessage.success('签到成功')
      fetchMyActivities()
    } else {
      ElMessage.error(response.data.message || '签到失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('签到失败:', error)
      if (error.response) {
        ElMessage.error(error.response.data.message || '签到失败')
      } else {
        ElMessage.error('网络错误，请检查连接')
      }
    }
  }
}

// 签退
const handleCheckOut = async (activityId) => {
  try {
    await ElMessageBox.confirm('确定要签退吗？', '签退确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })

    const response = await axios.post(`${BASE_URL}/api/v1/activities/checkout`, {
      activityId: activityId,
      userId: user.value.userId,
      username: user.value.username
    }, {
      headers: {
        'Authorization': `Bearer ${user.value.token}`
      }
    })

    if (response.data.code === 2000) {
      ElMessage.success('签退成功')
      fetchMyActivities()
    } else {
      ElMessage.error(response.data.message || '签退失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('签退失败:', error)
      if (error.response) {
        ElMessage.error(error.response.data.message || '签退失败')
      } else {
        ElMessage.error('网络错误，请检查连接')
      }
    }
  }
}

// 获取活动状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已发布',
    2: '进行中',
    3: '进行中',
    4: '已结束',
    5: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'success',
    2: 'primary',
    3: 'warning',
    4: 'danger'
  }
  return typeMap[status] || ''
}

// 初始化数据
onMounted(() => {
  fetchCategories()
  fetchActivities()
  if (user.value.username) {
    fetchMyActivities()
  }
})
</script>

<style scoped lang="scss">
.activity-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8fafc;
  min-height: calc(100vh - 48px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f6f9fc 0%, #eef2f5 100%);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

  .header-content {
    .activity-title {
      position: relative;
      margin: 0 0 8px 0;
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      display: inline-block;

      .title-text {
        position: relative;
        z-index: 2;
      }

      .title-decoration {
        position: absolute;
        bottom: 4px;
        left: 0;
        width: 100%;
        height: 12px;
        background: linear-gradient(90deg, rgba(64,158,255,0.2) 0%, rgba(64,158,255,0) 100%);
        border-radius: 6px;
        z-index: 1;
      }
    }

    .page-description {
      margin: 0;
      font-size: 14px;
      color: #7f8c8d;
    }
  }

  .my-activity-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);

    .el-icon {
      margin-right: 6px;
    }
  }
}

.category-filter {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  .category-group {
    display: flex;
    gap: 8px;

    .category-item {
      position: relative;
      border-radius: 12px;
      border: 1px solid #e4e7ed;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      margin: 4px;

      // 默认状态
      &:not(.is-active) {
        background-color: #f8fafc;
        color: #5f6c7b;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(64, 158, 255, 0.15);
          border-color: rgba(64, 158, 255, 0.5);
          color: var(--el-color-primary);
          background-color: rgba(64, 158, 255, 0.05);
        }
      }

      // 激活状态
      &.is-active {
        background: linear-gradient(135deg, var(--el-color-primary) 0%, #409EFF 100%);
        border-color: transparent;
        color: white;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        font-weight: 500;

        // 添加微妙的发光效果
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        &:hover::after {
          opacity: 1;
        }
      }

      // 按钮内部文字样式
      .el-radio-button__inner {
        padding: 8px 16px;
        font-size: 14px;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      // 禁用状态
      &.is-disabled {
        opacity: 0.6;
        filter: grayscale(50%);
        pointer-events: none;
      }
    }
  }
}

.activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 24px;

  .activity-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .card-content {
      display: flex;
      height: 100%;

      .activity-cover {
        width: 140px;
        height: 160px;
        flex-shrink: 0;
        margin-right: 16px;
        border-radius: 8px;
        overflow: hidden;

        .cover-image {
          width: 100%;
          height: 100%;
          transition: transform 0.3s ease;

          &:hover {
            transform: scale(1.05);
          }
        }

        .image-error {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #f5f7fa;
          color: #909399;
          font-size: 12px;

          .el-icon {
            font-size: 24px;
            margin-bottom: 8px;
          }
        }
      }

      .activity-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 4px 0;

        .activity-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 12px;

          .activity-name {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            flex: 1;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .el-tag {
            margin-left: 8px;
            flex-shrink: 0;
            font-size: 12px;
          }
        }

        .activity-meta {
          flex: 1;
          margin-bottom: 12px;

          .meta-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 13px;
            color: #666;

            .meta-icon {
              margin-right: 6px;
              color: var(--el-color-primary);
              font-size: 14px;
            }

            span {
              line-height: 1.4;
            }
          }
        }

        .activity-actions {
          display: flex;
          gap: 8px;

          .detail-btn {
            background-color: #f0f7ff;
            border-color: #d0e3ff;
            color: var(--el-color-primary);

            &:hover {
              background-color: #e0efff;
            }
          }

          .join-btn, .action-btn {
            .el-icon {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.my-activities-dialog {
  .el-dialog__body {
    padding: 0 20px;
  }

  .el-table {
    .el-tag {
      border-radius: 10px;
    }

    .detail-btn, .action-btn {
      .el-icon {
        margin-right: 4px;
      }
    }
  }
}

.activity-detail-dialog {
  .el-dialog__body {
    padding: 20px;
  }

  .activity-detail {
    display: flex;
    gap: 24px;

    .detail-cover {
      width: 300px;
      flex-shrink: 0;
      border-radius: 12px;
      overflow: hidden;

      .detail-image {
        width: 100%;
        height: 200px;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }

      .image-error {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f5f7fa;
        color: #909399;
        font-size: 14px;

        .el-icon {
          font-size: 36px;
          margin-bottom: 12px;
        }
      }
    }

    .detail-content {
      flex: 1;

      .detail-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        h3 {
          margin: 0 12px 0 0;
          font-size: 20px;
          color: #2c3e50;
        }

        .el-tag {
          align-self: flex-start;
        }
      }

      .detail-meta {
        margin-bottom: 20px;

        .meta-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          font-size: 14px;
          color: #555;

          .meta-icon {
            margin-right: 8px;
            color: var(--el-color-primary);
            font-size: 16px;
          }
        }
      }

      .detail-description {
        padding: 16px;
        background-color: #f8fafc;
        border-radius: 8px;

        .description-title {
          margin: 0 0 12px 0;
          font-size: 16px;
          color: #2c3e50;
          display: flex;
          align-items: center;

          .el-icon {
            margin-right: 6px;
            color: var(--el-color-primary);
          }
        }

        .description-content {
          line-height: 1.6;
          color: #555;

          :deep(p) {
            margin: 0 0 12px 0;
          }
        }
      }
    }
  }

  .dialog-footer {
    .join-btn, .action-btn {
      .el-icon {
        margin-right: 6px;
      }
    }
  }
}

@media (max-width: 768px) {
  .activity-list {
    grid-template-columns: 1fr;
  }

  .activity-card .card-content {
    flex-direction: column;

    .activity-cover {
      width: 100% !important;
      height: 180px !important;
      margin-right: 0 !important;
      margin-bottom: 12px;
    }
  }

  .activity-detail {
    flex-direction: column;

    .detail-cover {
      width: 100% !important;
      margin-bottom: 16px;
    }
  }
}
</style>